<template>
  <div class="dynamic-list">
    <div class="dynamic-list-item" v-if="showHeader">
      <div class="dynamic-list-item__index"></div>
      <div class="dynamic-list-item__center">
        <slot name="header">

        </slot>
      </div>
      <div class="dynamic-list-item__ctrl"  v-if="deleteAble">
        <slot name="header-ctrl"></slot>
      </div>
    </div>
    <div class="dynamic-list-item" v-for="(item, index) in currList" :key="item.uuid" @click.stop="onLineClick(item)">
      <div class="dynamic-list-item__index">
        <slot name="index" :data="index + 1">
          {{ index + 1 }}
        </slot>
      </div>
      <div class="dynamic-list-item__center">
        <slot :item="item" :$index="index"></slot>
      </div>
      <div class="dynamic-list-item__ctrl" v-if="deleteAble">
        <el-button size="mini" type="danger" icon="el-icon-delete" @click="onRemove(index)"></el-button>
      </div>
    </div>
    <div class="dynamic-list-bottom" v-if="addAble">
      <el-button size="mini" style="width: 100%" type="primary" icon="el-icon-plus" @click="onAdd()"></el-button>
    </div>
  </div>
</template>

<script>
import { guid, uid } from '../utils/util'

export default {
  name: 'dynamic-list',
  props: {
    list: Array,
    tmp: [Object, Array],
    showHeader: Boolean,
    addFn: Function,
    removeFn: Function,
    getTmp: Function, // 特殊组件需要根据此获取添加的内容模板
    addAble: { // 是否允许添加行
      type: Boolean,
      default: true
    },
    deleteAble: { // 是否允许删除
      type: Boolean,
      default: true
    }
  },
  data() {
    const currList = this.list.map(o => {
      o.uuid = guid()
      return o
    })
    return {
      currList
    }
  },
  methods: {
    onRemove(index) {
      const removeItem = this.currList[index]
      this.currList.splice(index, 1)
      if(this.removeFn) {
        this.removeFn(index)
      }
      this.$emit('remove', removeItem)
      this.$emit('update', this.currList)

    },
    onAdd() {
      let item = Object.assign({}, this.tmp)

      if (Object.prototype.toString.call(this.tmp) === '[object Array]') {
        item = [].concat(this.tmp)
      }

      if(this.addFn) {
        this.addFn()
        return
      }

      if (this.getTmp) {
        item = this.getTmp()
      }

      item.uuid = uid();
      this.currList.push(item)
      this.$emit('update', this.currList)
    },
    getData() {
      return this.currList
    },
    onLineClick(item) {
      this.$emit('line-click', item)
    }
  },
  watch: {
    list: {
      deep: true,
      handler() {
        this.currList = this.list.map(o => {
          if(!o.uuid) {
            o.uuid = guid()
          }
          return o
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dynamic-list {
  position: relative;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-top: 1px solid #eee;

  &-item {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid #eee;

    &__index {
      padding: 0 10px;
      width: 20px;
    }

    &__ctrl {
      padding: 0 10px;
      width: 80px;
    }

    &__center {
      flex: 1;
      margin: 0 10px;
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  &-bottom {
    margin: 10px 0;
    text-align: center;
  }
}
</style>
